<template>
	<view class="near">




		<u-navbar id="tabbars" :is-back="true" :border-bottom="false" back-icon-color="#fff" title="归还氧气瓶"
			title-size="36" title-color="#fff" :background="background">

			<!-- <view class="slot-wrap">
				<image @click="goback" class="back" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/21.png"
					mode=""></image>
			</view> -->
		</u-navbar>
		<view :style="{'top': totalHeight+'px'}" class="decoration">
			<image class="imgs" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/c1.png" mode=""></image>
		</view>

		<view class="content">

			<view class="info">
				<view v-if="list.length" class="list">
					<view class="item" style="position: relative;" v-for="item in list">

					<!-- 	<view class="status">
							<text class="doing" v-if="item.back_state=='未归还'">{{item.back_state}}</text>
							<text v-else>{{item.back_state}}</text>
						</view> -->
						<view class="iteminner">
							<img class="img" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/20.png" alt="">
							<view class="detail">
								<view class="name">
									<view class="left">
										{{item.name}}
									</view>

								</view>
								<view class="mid">
									<view class="left">
										<view class="addr">
											<img style="width:24rpx ; height: 24rpx;" class="icon"
												src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/17.png" alt="">
											{{item.status}}
										</view>
										<view class="time">
											<img class="icon"
												src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/16.png" alt="">

											{{item.address}}
										</view>
									</view>
									<!-- <view class="right">
										<view class="money">
											70 <text>小时</text>
										</view>
										<view class="desc1" style="text-align: center; margin-bottom: 8px;">
											已使用
										</view>

									</view> -->
								</view>

								<view class="bottoms">
									<view class="left">
										已使用 <text>{{item.time}}</text>
									</view>
									<view @click="handle(item)" class="right">
										<image class="img1"
											src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/31.png" mode="">
										</image>
									</view>
								</view>

							</view>
						</view>

					</view>


				</view>

				<view v-else class="empty" style="padding-top: 150px;">
					<view v-if="!list.length && senDate" class="emptyAddress-box">
						<u-empty text="暂无可归还的订单" mode="news"></u-empty>
					</view>
				</view>
			</view>
		</view>

		<!-- 加入qq -->
		<u-popup border-radius="29" v-model="qqshow" mode="center">
			<view class="qq">
				<fail @cancelFn="cancelFn" @handleClick="handleClick" />
			</view>
			
		</u-popup>
		<u-popup :mask-close-able="false" border-radius="29" v-model="qqshow1" mode="center">
			<view class="qq">
				<doing />
			</view>
			<!-- <image @click="qqshow1=false" class="close" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/32.png"
				mode=""></image> -->
		</u-popup>




		<u-popup border-radius="29" v-model="takeMoneyShow" mode="center">
			<view class="qq">
				<suc @closeDk="closeDk" />
			</view>
			<image @closeDk="closeDk" class="close" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/32.png"
				mode=""></image>
		</u-popup>
	</view>
</template>

<script>
	import fail from './fail.vue'

	import doing from './doing.vue'
	import suc from './suc.vue'
	export default {
		components: {
			fail,
			doing,
			suc
		},
		data() {
			return {
				cueIDS:'',
				count:0,
				senDate: false,
				slotId: '',
				curId: "",
				intervalTime: null,
				list: [],
				totalHeight: 0, //总高度    
				qqshow: false,
				qqshow1: false,
				takeMoneyShow: false,
				background: {

					background: 'url(https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/9.png) no-repeat',
					// 还可以设置背景图size属性
					backgroundSize: 'cover',
					// 渐变色
					// backgroundImage: 'linear-gradient(180deg, #417CF4 0%, #84ACFF 100%)'
				}
			}
		},

		onReady() {
			uni.hideTabBar();
			uni.createSelectorQuery().select('#tabbars').boundingClientRect((rect) => {
				console.log(rect.height)
				this.totalHeight = rect.height
			}).exec()
		},
		onLoad(e) {
			this.curId = e.deviceId

		},
		onShow() {
			this.list = []
			this.getlist()
		},
		onHide() {
			clearInterval(this.intervalTime);
		},
		methods: {
			cancelFn(){
				this.qqshow = false
				this.qqshow1 = false
			},
			handleClick(){
				this.qqshow = false
				this.getResult(this.cueIDS) 
			},
			handle(val) {
				this.cueIDS = val.id
				this.getResult(val.id) // 接口方法
			},
			getBackStatus() {
				this.$u.api.getSlotOpenState({
						slotId: this.slotId
					})
					.then((res) => {
						if (res.code == 0) {

							// this.takeMoneyShow = true
							if (res?.slot?.openState == 0 && res?.slot?.haveState == 1) {
								this.qqshow1 = false
								clearInterval(this.intervalTime)
								this.takeMoneyShow = true
							}else{
								if(this.count>=5){
									// 搞成6
									clearInterval(this.intervalTime)
									this.count=0
									this.qqshow1 = false
									this.qqshow = true
								}
								
							}

						}
					});
			},

			getResult(detailId) {

				this.$u.api.backDevice({
						deviceId: this.curId,
						detailId
					})
					.then((res) => {
						if (res.code == 0) {
							this.qqshow1 = true
							console.log(res.slot.id);
							this.slotId = res.slot.id
							// clearInterval(this.intervalTime)
							this.getBackStatus() // 接口方法
							this.intervalTime = setInterval(() => {
								this.count++
								this.getBackStatus(); // 接口方法
							}, 4000);
							// clearInterval(this.intervalTime);
						} else {
							this.$u.toast(res.msg)
						}
					});
			},
			getTimeDifference(startDate) {
				const now = new Date();
				const start = new Date(startDate);
				const diffMs = now - start; // 差值，单位为毫秒
				
				const timeDiff =  now - start;
				
				 var daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
				  var hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				  var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
				// const seconds = Math.floor((diffMs / 1000) % 60);
				// const minutes = Math.floor((diffMs / (1000 * 60)) % 60);
				// const hours = Math.floor((diffMs / (1000 * 60 * 60)) % 24);

				return `${daysDiff}天${hours}小时${minutes}分钟`;
			},
			getlist() {

				this.senDate = false;
				this.$u.api.doingOrder({})
					.then((res) => {
						this.senDate = true;
						console.log(res, 55555555555);
						this.list = res.list?.map(r => {
							return {
								...r,
								status: JSON.parse(r.borrow_snapshot).businessHours,
								time: this.getTimeDifference(r.start_time)

							}

						})

					});
			},
			closeDk() {
				this.takeMoneyShow = false
				this.getlist()
			},
			goback() {
				uni.reLaunch({
					url: "/pages/sys/main/index"
				})
			}
		},

	}
</script>

<style>
	page {
		background: #EDF7FF;
	}
</style>
<style scoped lang="scss">
	.status{
		position: absolute;
		right: 0;
		top: 0;
		width: 129rpx;
		height: 43rpx;
		
		text{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 129rpx;
			height: 43rpx;
			background: #E8E8E8;
			color: #797979;
			font-size: 12px;
			border-radius: 0 0 0 32rpx;
			
			&.doing{
				background: #A5E9FF;
				color: #129AC6;
				
			}
		}
	}
	.decoration {
		width: 100%;
		height: 35rpx;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 88;

		.imgs {
			width: 100%;
			height: 35rpx;
		}
	}

	.near {
		background: #EDF7FF;
		padding-bottom: 30rpx;
		// background: url("https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/c1.png") no-repeat;
		// background-size: 750rpx 189rpx;
	}

	/deep/ .u-drawer__scroll-view {
		height: inherit !important;
	}

	/deep/ .u-mode-center-box {
		background: none !important;
	}

	.close {
		width: 65rpx;
		height: 65rpx;
		display: block;
		// background: rgba(255,255,255,0.8);
		margin: 46rpx auto;
	}

	.tips {

		margin: 50px 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Light, PingFang SC;
		font-weight: 300;
		color: #999999;

		text {
			color: #7F76FF;
		}
	}

	.back {
		width: 30rpx;
		height: 46rpx;
		margin-left: 40rpx;
	}

	.bottoms {
		padding: 20rpx 0 0;
		display: flex;
		// align-items: center;
		justify-content: space-between;

		.left {
			padding-top: 20rpx;
			font-size: 25rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 29rpx;

			text {
				font-size: 24rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				// font-weight: 600;
				color: #3B70FF;
				padding: 0 10rpx;
			}
		}

		.right {
			margin-right: -5px;

			.img1 {
				width: 178rpx;
				height: 82rpx;
			}
		}
	}

	.content {
		background: #EDF6FF;
		position: relative;

		.deco {
			position: absolute;
			top: -1px;
			width: 100%;
		}

		.info {
			margin: 0 27rpx;
			min-height: 400px;

			.list {
				padding-top: 16px;

				.item {
					padding: 38rpx 36rpx 0;
					background: #FFFFFF;
					border-radius: 11rpx 11rpx 11rpx 11rpx;
					margin-bottom: 32rpx;
				}

				.iteminner {

					// overflow: hidden;
					display: flex;

					.img {
						width: 59rpx !important;
						height: 59rpx !important;
						border-radius: 50%;
						margin-right: 31rpx;
					}

					.detail {

						// margin-bottom: 20rpx;
						// width: 500rpx;
						flex: 1;

						.name {

							display: flex;
							align-items: center;
							justify-content: space-between;

							.left {
								font-size: 32rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #333333;
								line-height: 38rpx;
							}

							.right {
								font-size: 24rpx;
								color: #999;
							}
						}

						.mid {
							padding: 12rpx 0 0 0;
							display: flex;
							border-bottom: 1rpx solid #E4E4E4;

							.left {
								flex: 1;
								font-size: 23rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 27rpx;

								.addr {
									padding-bottom: 13rpx;
									display: flex;
									align-items: center;

									.icon {
										width: 24rpx;
										height: 29rpx;
										margin-right: 13rpx;
									}
								}

								.time {
									font-size: 22rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: 400;
									color: #999999;
									line-height: 26rpx;
									padding-bottom: 24rpx;
									display: flex;
									align-items: center;

									.icon {
										width: 24rpx;
										height: 24rpx;
										margin-right: 13rpx;

									}
								}
							}

							.right {
								.money {
									display: flex;
									align-items: flex-end;
									font-size: 58rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 500;
									color: #04BC6D;
									line-height: 68rpx;

									text {
										font-size: 22rpx;
										font-family: PingFang SC-Medium, PingFang SC;
										font-weight: 500;
										color: #04BC6E;
										line-height: 40rpx;
										padding-left: 5rpx;
									}
								}

								.desc1 {
									font-size: 22rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: 400;
									color: #666666;
									line-height: 26rpx;
								}

								margin-top: -20rpx;

								// .dh {
								// 	width: 90rpx;
								// 	height: 90rpx;
								// }
							}
						}
					}

				}
			}
		}
	}
</style>
